import React from 'react'
import { Carousel, Flex, Grid } from 'antd-mobile'
import axios from 'axios'
// 导入图片
// import Nav1 from '../../assets/images/nav-1.png'
// import Nav2 from '../../assets/images/nav-2.png'
// import Nav3 from '../../assets/images/nav-3.png'
// import Nav4 from '../../assets/images/nav-4.png'
// 导入样式
import './index.scss'
// 导航菜单数据
const NavLists = [
  {
    id: 1,
    path: '/home/LookingRoom',
    name: '整租',
    img: require('../../assets/images/nav-1.png').default,
  },
  {
    id: 2,
    path: '/home/LookingRoom',
    name: '合租',
    img: require('../../assets/images/nav-2.png').default,
  },
  {
    id: 3,
    path: '/home/list',
    name: '地图找房',
    img: require('../../assets/images/nav-3.png').default,
  },
  {
    id: 4,
    path: '/home/list',
    name: '出租',
    img: require('../../assets/images/nav-4.png').default,
  },
]
// 默认请求根路径
const baseUrl = 'http://localhost:8080'
// 获取地理信息
// navigator.geolocation.getCurrentPosition((position) => {
//   console.log('当前地理位置信息：', position)
// })

export default class Index extends React.Component {
  state = {
    // 图片的名称
    // 轮播图两个存在的问题：轮播图数据动态加载，加载前后数量不一致导致的
    // 解决方法：设置一个状态（默认为false）判断轮播图数据是否加载完成，加载完成设置为true并渲染
    swipers: [],
    isSwipers: false,
    groupsList: [], // 租房小组数据
    consuilingList: [],
    curCityName: '上海', // 当前城市名称
  }
  // 获取轮播图数据
  async getSwipersData() {
    const res = await axios.get(baseUrl + '/home/swiper')
    this.setState({
      swipers: res.data.body,
      isSwipers: true,
    })
  }
  // 获取租房小组数据
  async getGroupsListData() {
    const res = await axios.get(baseUrl + '/home/groups', {
      params: {
        area: 'AREA|88cff55c-aaa4-e2e0',
      },
    })
    this.setState({
      groupsList: res.data.body,
    })
  }
  // 获取最新资讯数据
  async getConsuilingData() {
    const res = await axios.get(baseUrl + '/home/news', {
      params: {
        area: 'AREA|88cff55c-aaa4-e2e0',
      },
    })
    // console.log(res, '最新资讯')
    this.setState({
      consuilingList: res.data.body,
    })
  }

  // 渲染轮播图结构
  renderSwipersDom() {
    return this.state.swipers.map((item) => (
      <a
        key={item.id}
        href="http://www.alipay.com"
        style={{ display: 'inline-block', width: '100%', height: 212 }}
      >
        <img
          src={`http://localhost:8080${item.imgSrc}`}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
          onLoad={() => {
            // fire window resize event to change height
            window.dispatchEvent(new Event('resize'))
            this.setState({ imgHeight: 'auto' })
          }}
        />
      </a>
    ))
  }
  // 渲染导航菜单
  renderNavs() {
    return NavLists.map((item) => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.name}</h2>
      </Flex.Item>
    ))
  }
  // 渲染最新资讯
  renderConsuiling() {
    return this.state.consuilingList.map((item) => (
      <Flex className="consuiling-item" key={item.id}>
        <Flex.Item>
          <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
        </Flex.Item>
        <Flex.Item>
          <Flex direction="column" justify="between" className="flexItem_two">
            <Flex.Item>
              <span>{item.title}</span>
            </Flex.Item>
            <Flex.Item>
              <Flex justify="between">
                <span>{item.from}</span>
                <span>{item.date}</span>
              </Flex>
            </Flex.Item>
          </Flex>
        </Flex.Item>
      </Flex>
    ))
  }
  // 组件渲染后调用
  componentDidMount() {
    this.getSwipersData()
    this.getGroupsListData()
    this.getConsuilingData()
    // 通过 IP 定位获取当前城市名称
    let curCity = new window.BMapGL.LocalCity()
    curCity.get(async (data) => {
      // console.log('当前地图位置：', data)
      const res = await axios.get(
        `http://localhost:8080/area/info?name=${data.name}`
      )
      // console.log(res)
      this.setState({
        curCityName: res.data.body.label,
      })
    })
  }
  render() {
    return (
      <div className="index">
        {/* 轮播图 */}
        <div className="swipers">
          {this.state.isSwipers ? (
            <Carousel autoplay infinite autoplayInterval={3000}>
              {this.renderSwipersDom()}
            </Carousel>
          ) : (
            ''
          )}
          {/* 搜索框 */}
          <Flex className="search-box">
            {/* 左侧白色区域 */}
            <Flex className="search">
              {/* 位置 */}
              <div
                className="location"
                onClick={() => this.props.history.push('/cityList')}
              >
                <span className="name">{this.state.curCityName}</span>
                <i className="iconfont icon-xiala" />
              </div>
              {/* 搜索表单 */}
              <div
                className="form"
                onClick={() => this.props.history.push('/search')}
              >
                <i className="iconfont icon-search" />
                <span className="text">请输入小区或地址</span>
              </div>
            </Flex>
            {/* 右侧地图图标 */}
            <i
              className="iconfont icon-dituzhaofang"
              onClick={() => this.props.history.push('/map')}
            />
          </Flex>
        </div>
        {/* 导航菜单 */}
        <Flex className="NavFlexs">
          {this.renderNavs()}
          {/* <Flex.Item>
            <img src={Nav1} alt=""/>
            <h2>出租</h2>
          </Flex.Item>
          <Flex.Item>
            <img src={Nav2} alt=""/>
            <h2>合租</h2>
          </Flex.Item>
          <Flex.Item>
            <img src={Nav3} alt=""/>
            <h2>地图找房</h2>
          </Flex.Item>
          <Flex.Item>
            <img src={Nav4} alt=""/>
            <h2>整租</h2>
          </Flex.Item> */}
        </Flex>
        {/* 租房小组 */}
        <div className="grouds">
          <h3 className="title">
            <span>租房小组</span>
            <span className="more">更多</span>
          </h3>
          {/* Grid 宫格组件 */}
          <Grid
            data={this.state.groupsList}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={(item) => (
              <Flex className="group-item" justify="around" key={item.id}>
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>
        {/* 最新资讯 */}
        <div className="consuiling">
          <h3 className="consuiling-title">最新资讯</h3>
          {this.renderConsuiling()}
        </div>
      </div>
    )
  }
}
